<template>
    <div class="dahezi">
       <header class="toubu">
          <div class="_toubu">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
             <span class="iconfont icon-gouwuche"></span>
          </div>
          <section class="neirong">
              <div class="nei-left">
                  <img src="https://fuss10.elemecdn.com/5/3a/f7ef20c0a95674bc719470faf2a47jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
              </div>
              <div class="nei-right">
                  <h1>DQ冰淇淋（金街店）</h1>
                  <div class="zi">
                    <p>蜂鸟专送 <span>/</span> </p>
                    <p>23分钟送达 <span>/</span> </p>
                    <p>配送费￥5</p>
                  </div>
                  <div class="guanggao">
                     <span>公告：</span>
                     <p>用餐高峰期请提前下单，谢谢。</p>
                  </div>
                 
              </div>
          </section>
          <section class="xiamian">
              <p><span>首</span>新用户下单立减17元(不与其它活动同享)</p>
              <p>2个活动</p>
          </section>
       </header>
       <nav class="dao">
           <ul>
               <li>商品</li>
               <li>评价</li>
               <li>店铺</li>
           </ul>
       </nav>
       <section class="zhuhe">
           <ul>
               <li v-for="(v,i) in list" :key="i">{{v.name}}</li>
           </ul>
           <div class="right-he">
                <div class="he-top">
                    <p><span>热销</span>大家喜欢吃、才叫真好吃</p>
                </div>
                <div v-for='(a,b) in aa' :key='b' class="youhe">
                    <div class="ctn">
                            <div class="you-left"><img :src="a.imgUrl"></div>
                            <div class="you-right">
                                <h1>{{a.ming}}</h1>
                                <p>{{a.wenzi}}</p>
                                <p class="zuti">{{a.xiao}}</p>
                                <p class="jiage"><span class="sp1">{{a.jia}}</span><span class="iconfont icon-wuuiconxiangjifangda sp2"></span></p>
                            </div>
                    </div>
                </div>
           </div>
       </section>
       <footer class="ftr">
           <div class="ftr-top">
               满50减12
           </div>
           <div class="ftr-wei">
               <div class="wei-left">
                  <div class="wei-he">
                      <div class="hyu">
                          <p class="iconfont icon-gouwuche"></p>
                      </div>
                  </div>
                  <div class="wei-tyy">
                      <p>￥0</p>
                      <span>配送费：￥5</span>
                  </div>
               </div>
               <div class="wei-right">
                   <p>￥40起送</p>
               </div>
           </div>
       </footer>
    </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
      return{
        tilie: 'wert',
        list: [
            {name:"热销"},
            {name:"新品奶昔"},
            {name:"特色饮品"},
            {name:"迷你暴风雪冰淇淋"},
            {name:"暴风雪冰淇淋"},
            {name:"暴风雪填料"},
            {name:"其它"},
            {name:"新品冰卡"}         
        ],
         
        aa:[
            {
                imgUrl:"https://fuss10.elemecdn.com/d/51/d18a8089bc6196447c628db852d6bjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/d/51/d18a8089bc6196447c628db852d6bjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/c/e6/2a025fceb25dcc3431656749e6992jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/0/85/a9d46998926bd531604af58870698jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            },
            {
                imgUrl:"https://fuss10.elemecdn.com/e/c2/e163c76acc51cf0ffc7beb663eeffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                ming:"（有料大杯）奥利奥",
                wenzi:"口味尤赞，产品以实物....",
                xiao:"月售7份",
                jia:"￥30"
            }
        ]
            
       
      }
  }
}
</script>

<style scoped lang="less">
   .px2rem(@name, @px) {
       @{name}: @px / 75 * 1rem;
    }
   .dahezi{
       .toubu{
           width: 100%;
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           background: #99CCCC;
           font-family: "微软雅黑";
           ._toubu{
                width: 95%;
                .px2rem(height,80);
                display: flex;
                justify-content: space-between;
                align-items: center;
                span{
                    .px2rem(font-size,60);
                    color: #fff;
                }
           }
           .neirong{
               width: 100%;
               display: flex;
               .nei-left{
                   width: 30%;
                   .px2rem(height,180);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        .px2rem(width,140);
                        .px2rem(height,140)
                    }
               }
               .nei-right{
                   width: 70%;
                   .px2rem(height,180);
                   h1{
                       .px2rem(font-size,40);
                       font-weight: bold;
                       color: #fff;
                   }
                   .zi{
                       width: 100%;
                       .px2rem(height,60);
                       display: flex;
                       p{
                         .px2rem(font-size,28);
                         color: #fff;
                         line-height: 1.8;
                       }
                   }
                   .guanggao{
                         width: 100%;
                       .px2rem(height,60);
                       display: flex;
                       .px2rem(font-size,28);
                       color: #fff;
                       span{
                           .px2rem(width,85);
                       }
                       p{
                           flex: 1;
                       }
                   }
               }
           }
           .xiamian{
               width: 100%;
               .px2rem(height,70);
               display: flex;
               justify-content: space-around;
               p{
                   .px2rem(font-size,29);
                   color: #fff;
                   line-height: 1.9;
                   span{
                       background: #339900;
                   }
               }
           }
       }
       .dao{
            width: 100%;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #ccc;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
           ul{ 
               width: 70%;
               list-style: none;
               display: flex;
               justify-content: space-between;
               li{
                   width: 15%;
                   .px2rem(height,80);
                   .px2rem(font-size,36);
                   text-align: center;
                   line-height: 2;
                   font-weight: bold;               
               }
                li:first-child{
                    color: #0033FF;
                    border-bottom: 3px solid #0033FF;
                }
           }
           
       }
       .zhuhe{
           width: 100%;
           display: flex;
            flex-wrap: wrap;
           ul{
               width: 23%;
               .px2rem(height,1168);
               list-style: none;
               background: #CCCCFF;
            //    .px2rem(padding-bottom,125);
               position: sticky;
               top: 20px;
               .px2rem(padding-bottom,200);
               li{
                   width: 100%;
                   .px2rem(height,146);
                   .px2rem(font-size,38);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                   border-bottom: 1px solid #555;
               }
               li:last-child{
                   border-bottom: none;
               }
           }
           .right-he{
              width: 77%; 
             .px2rem(padding-bottom,170);
                .he-top{
                 width: 100%;
                .px2rem(height,115);
                   p{
                       .px2rem(font-size,34);
                       color: #555;
                       line-height: 2;
                       .px2rem(padding-left,20);
                       box-sizing: border-box;
                       span{
                           .px2rem(font-size,40);
                           font-weight: bold;
                           color: #000;
                       }
                   }
               }      
                .youhe{
                    width: 100%;
                    .px2rem(padding-bottom,30);
                    .ctn{
                        width: 100%;
                        display: flex;
                            .you-left{
                                width: 30%;
                                .px2rem(height,230);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                img{
                                    .px2rem(width,135);
                                    .px2rem(height,150);
                                }
                            }
                            .you-right{
                                width: 70%;
                                .px2rem(height,230);
                                h1{
                                    .px2rem(font-size,36);
                                    font-weight: bold;
                                }
                                p{
                                    line-height: 1.7;
                                    .px2rem(font-size,32);
                                    color: #555;
                                }
                                .zuti{
                                    .px2rem(font-size,36);
                                    color: #555;
                                    line-height: 1.5;
                                }
                                .jiage{
                                    display: flex;
                                    .sp1{
                                        width: 70%;                  
                                        .px2rem(font-size,40);
                                        color: #CC0033;
                                        font-weight: bold;
                                        line-height: 2;
                                    }
                                    .sp2{
                                        flex: 1;
                                        .px2rem(font-size,50);
                                        color: #3333FF;
                                    }
                                }
                            }
                    }
                
                }
            }
       }
       .ftr{
           width: 100%;
           position: fixed;
           bottom: 0;
           left: 0;
           z-index: 300;
           .ftr-top{
               width: 100%;
               .px2rem(height,60);
               background: #FFCC99;
               display: flex;
               justify-content: center;
               align-items: center;
               .px2rem(font-size,32);
           }
           .ftr-wei{
               width: 100%;
               display: flex;
               .wei-left{
                   width: 70%;
                   .px2rem(height,140);
                   background: #000;
                  .wei-he{
                      width: 35%;
                     .px2rem(height,140);
                     justify-content: center;
                     display: flex;
                     position: relative;
                     top: 0;
                     .hyu{
                         .px2rem(width,120);
                         .px2rem(height,120);
                         border: 8px solid #161823;
                         border-radius: 50%;
                         background: #000000;
                         justify-content: center;
                         align-items: center;
                         display: flex;
                         position: absolute;
                         top: -21px;
                         p{
                           .px2rem(font-size,80);
                           color: #666666;
                           
                         }
                     }
                  }
                 .wei-tyy{
                     width: 65%;
                     .px2rem(height,140);
                     display: flex;
                     flex-direction: column;
                     position: relative;
                     .px2rem(top,-140);
                     left: 35%;
                     p{
                         .px2rem(font-size,42);
                         font-weight: bold;
                         color: #fff;
                         .px2rem(padding-top,35);
                     }
                     span{
                         .px2rem(font-size,32);
                         color: #fff;
                         .px2rem(padding-top,12); 
                     }
                 }
               }
               .wei-right{
                   width: 30%;
                   .px2rem(height,140);
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   background: #161823;
                   p{
                       .px2rem(font-size,42);
                       font-weight: bold;
                       color: #fff;
                   }
               }
           }
       }
      
   }










</style>
